<template>
	<z-paging ref="paging" v-model="dataList" @query="queryList">
		<view class="main">
			<u-navbar title="" bgColor="#ffffff00" :fixed="false" :autoBack="false">
				<template v-slot:left>
					<view class="toptitle">抢单大厅</view>
				</template>
			</u-navbar>
			<view class="top">
				抢单大厅显示的是距离用户目的地5km范围内，但是又不满足自动接单条件的订单
			</view>

			<view class="order" v-for="item in dataList" :key="item.id">
				<view class="order-top" :class="item.order_info.category == 'calendar'?'bg1':'bg2'">
					<img class="order-top-icon" src="/static/image/mine/dd.png" alt="" />
					<text class="order-top-title">{{item.order_info.category == 'calendar'? '日历房':'当日特价房'}} 订单来了</text>
					<text class="order-top-tps">{{item.order_info.sn}}</text>
				</view>

				<view class="order-box">
					<view class="order-box-item" v-for="(items,indexs) in item.order_info.houses" :key="indexs">
						<view class="order-box-left">
							<image class="order-box-icon" style="width: 44rpx; height: 44rpx;"
								src="/pagesA/static/images/chuang.png" mode=""></image>
							<view class="xflex-x">
								<view class="order-box-span">
									{{items.type_name}}
								</view>

								<view class="order-box-span">
									<!-- {{item.order_info.need.num}}间 -->
									{{items.num}}间
								</view>
							</view>
						</view>
						<view class="order-box-room">
							库存共<text>{{items.stock}}间</text>
						</view>
					</view>

					<view class="order-box-item">
						<view class="order-box-left">
							<image class="order-box-icon" style="width: 44rpx; height: 44rpx;"
								src="/pagesA/static/images/rili.png" mode=""></image>
							<view class="xflex-x">
								<view class="order-box-span">
									{{item.order_info.time}}
								</view>

								<view class="order-box-span">
									{{item.order_info.night}}晚
								</view>
							</view>
						</view>
						<view class="order-box-room">

						</view>
					</view>

					<view class="order-box-item">
						<view class="order-box-left">
							<image class="order-box-icon" style="width: 44rpx; height: 44rpx;"
								src="/pagesA/static/images/qian.png" mode=""></image>
							<view class="xflex-x">
								<view class="order-box-price">
									客人出价
								</view>

								<view class="order-box-span1">
									{{item.order_info.offer.name}}
								</view>

								<view class="order-box-span1">
									￥{{item.order_info.offer.price}}/间
								</view>

							</view>
						</view>
						<view class="order-box-room">

						</view>
					</view>


					<view class="order-box-item">
						<view class="order-box-left">
							<view class="order-box-total xflex-x">
								合计: <view class="order-box-num"><text
										class="xfz26">￥</text>{{item.order_info.total_money}}</view>
							</view>
						</view>
						<view class="xflex-x">
							<view class="xfz24 xfw500 xc9">
								更多条件
							</view>
							<image class="order-gd" src="/pagesA/static/images/gengduo.png" mode=""></image>
						</view>
					</view>


					<view class="xflex-x-between xpt32 xpb32">
						<view class="xflex-x">
							<image class="order-sj" src="/pagesA/static/images/shijian.png" mode=""></image>
							<view class="xfz24 xfw500 xc6">
								已等待
							</view>
							<view class="order-time">
								{{item.wait_time}}分钟
							</view>
						</view>
						<view class="order-grab" @click="grabOrder(item)">
							抢单
						</view>
					</view>

				</view>
			</view>



			<u-popup :show="popinfo.show" @close="close" @open="open" :overlay="false" zIndex="10070">
				<view class="qd pr">
					<image class="pa gb" @click="popinfoclone()" src="/pagesA/static/images/guanbi1.png" mode=""></image>
					<view class="qd-top">
						<view class="">
							<view class="xflex-x">
								<view class="qd-top-title">
									开始抢单
								</view>
								<image class="qd-top-icon"  @click="popinfo.ptipsshow = true"  src="/pagesA/static/images/yw.png" mode=""></image>
							</view>

							<view class="qd-top-tips">
								客户订单需求
							</view>
						</view>

						<view class="xflex-x-between xmt20">
							<view class=" qd-top-fj xflex-x xmb12">
								<view class="qd-top-lname">
									{{popinfo.data?.order_info?.need?.name || ''}}
								</view>
								<view class="qd-top-fjx">
									
								</view>
								<view class="qd-top-lprice">
									￥{{popinfo.data?.order_info?.need?.price || ''}}/间
								</view>
							</view>
							<view class=" qd-top-fj xflex-x xmb12">
								<view class="qd-top-luser">
									{{popinfo.data?.order_info?.need?.adult}}成人{{popinfo.data?.order_info?.need?.children}}儿童
								</view>
								<view class="qd-top-fjs">
									
								</view>
								<view class="qd-top-lnum">
									{{popinfo.data?.order_info?.need?.num}}间
								</view>
							</view>
						</view>

						<view class="xflex-x xmt20">
							<view class="span" v-for="(item,index) in popinfo.data?.order_info?.need?.attach">
								{{item}}
							</view>
						</view>
					</view>

					<view class="xmt20 xbgf qd-box xflex1">

						<view class="" v-if="popinfo.type == 1">
							<view class="xflex-x">
								<view class="qd-box-span" @click="house.index = index"
									:class="house.index == index ?'active':''" v-for="(item,index) in house.list"
									:key="index">
									{{item.name}}
								</view>
							</view>

							<scroll-view scroll-y="true" style="height: 600rpx;">
								<view>
									<view class="qd-item xflex-x"
										v-for="(items,indexs) in house.list[house.index].houses" :key="indexs">
										<image class="qd-item-icon xmr12" @click="onShow(indexs,false)"
											v-if="items.show" src="/pagesA/static/images/xuanze.png" mode=""></image>
										<image class="qd-item-icon xmr12" @click="onShow(indexs,true)" v-else
											src="/pagesA/static/images/wxuanze.png" mode=""></image>

										<view class="xflex-x xflex1">
											<image :src="items.image" class="qd-item-img" mode=""></image>
											<view class="qd-item-info xai xflex-y-between xflex1">
												<view class="">
													{{items.name}}
												</view>
												<view class="xflex-x-between ">
													<view class="qd-item-money">
														<text>￥</text>{{items.price}}
													</view>
													<view class="counter xflex-x">
														<image class="counter-icon" @click="onNum('reduce',indexs)"
															src="/pagesA/static/images/jian.png" mode=""></image>
														<view class="counter-num">
															{{items.num}}
														</view>
														<image class="counter-icon" @click="onNum('add',indexs)"
															src="/pagesA/static/images/jia.png" mode=""></image>
													</view>
												</view>
											</view>
										</view>
									</view>
								</view>
							</scroll-view>


						</view>

						<view class="qd-yh" v-if="popinfo.type == 2">
							<scroll-view scroll-y="true" style="height: 700rpx;">
								<view>
									<view class="qd-yh-title xmb20">
										优惠条件
									</view>

									<view class="qd-yh-yhq">
										<view class="pr qd-yh-yhqitem" @click="ondiscount(item)"
											v-for="(item,index) in house.discount" :key="index"
											:class="info.discount.includes(item.id)?'boder':''">
											
											<view class="">
												{{item.name}}
											</view>
											<image class="pa qd-yh-img" src="/pagesA/static/images/xz.png"
												v-if="info.discount.includes(item.id)" mode=""></image>
										</view>
									</view>

									<view class="xmt20 xmb20">
										<u--textarea v-model="info.project" placeholder="请输入内容"></u--textarea>
									</view>

									<view class="qd-yh-title xmb20">
										房型标签
									</view>

									<view class="qd-yh-yhqs">
										<view class="pr qd-yh-yhqitems" @click="onhouse(item)"
											v-for="(item,index) in house.types" :key="index"
											:class="info.lable.includes(item.id)?'boder':''">
											<view class="">
												{{item.name}}
											</view>
											<image class="pa qd-yh-img" src="/pagesA/static/images/xz.png" mode=""
												v-if="info.lable.includes(item.id)"></image>
										</view>
									</view>
								</view>
							</scroll-view>
						</view>


						<view class="xflex-x-between xmt40">
							<view class="qd-ts">
								<text>已选择房间：</text>
								{{hoysname}}
							</view>
							<view class="next" @click="popinfo.type = 2" v-if="popinfo.type == 1">
								下一步
							</view>

							<view class="next" @click="submit()" v-if="popinfo.type == 2">
								提交抢单
							</view>
						</view>
					</view>

				</view>
			</u-popup>



			<u-popup :show="popinfo.ptipsshow" mode="center" round="12" zIndex="10100">
				<view class="ptips pr" >
					<image class="gb pa" @click="popinfo.ptipsshow = false" src="/pagesA/static/images/guanb.png" mode=""></image>
					<view class="ptips-title">
						抢单说明
					</view>
					<view class="ptips-box">
						<u-parse :content="popinfo.content"></u-parse>
					</view>
				</view>
			</u-popup>


			<tabbars :list="tabs.list" :value="1" />
		</view>
	</z-paging>
</template>

<script setup>
	import {
		halllists,
		hallhouse,
		discounthouse,
		typeLabel,
		hallrob,
		indexcontent,
		partnerinfo
	} from '../../../network/home.js'
	import {
		reactive,
		ref,
		computed
	} from 'vue';
	import tabbars from "/components/tabbar/tabbar.vue"

	// let tabs = reactive({
	// 	list: [{
	// 			type: 'solt',
	// 			selected: '/pagesA/static/images/tab/2.png',
	// 			unselected: '/pagesA/static/images/tab/1.png',
	// 			text: '订单',
	// 			path: '/pagesA/page/home/home'
	// 		},
	// 		{
	// 			type: 'zhong',
	// 			selected: '/pagesA/static/images/tab/4.png',
	// 			unselected: '/pagesA/static/images/tab/3.png',
	// 			path: '/pagesA/page/lobby/lobby'
	// 		},
	// 		{
	// 			type: 'solt',
	// 			selected: '/pagesA/static/images/tab/6.png',
	// 			unselected: '/pagesA/static/images/tab/5.png',
	// 			text: '我的',
	// 			path: '/pagesA/page/mine/mine'
	// 		}
	// 	]
	// })
	
	
	
	partnerinfo().then(res => {
		console.log(res,"=slk");
	
		
		tabs.list[0].badge = res.data.default.wait_checkin
		tabs.list[1].badge = res.data.default.wait_rob
		
	})
	
	let tabs = reactive({
		list: [{
				type: 'solt',
				selected: '/pagesA/static/images/tab/2.png',
				unselected: '/pagesA/static/images/tab/1.png',
				text: '订单',
				path: '/pagesA/page/home/home',
				badge:0
			},
			{
				type: 'zhong',
				selected: '/pagesA/static/images/tab/4.png',
				unselected: '/pagesA/static/images/tab/3.png',
				path: '/pagesA/page/lobby/lobby',
				badge:0
			},
			{
				type: 'solt',
				selected: '/pagesA/static/images/tab/6.png',
				unselected: '/pagesA/static/images/tab/5.png',
				text: '我的',
				path: '/pagesA/page/mine/mine',
				badge:0
			}
		]
	})


	let house = reactive({
		list: [],
		index: 0,
		discount: [],
		types: []
	})

	let info = reactive({
		id: '',
		houses: [],
		discount: [],
		project: '',
		lable: []
	})

	let popinfo = reactive({
		show: false,
		data: '',
		type: 1,
		content:'',
		ptipsshow:false
	})
	
	const popinfoclone =() =>{
		info.id = ''
		info.houses = []
		info.discount =[]
		info.project = ''
		info.lable = []
		popinfo.type = 1
		popinfo.show = false
	}
	
	indexcontent({name:'rob_order_intro'}).then(res=>{
		console.log(res);
		popinfo.content = res.data
	})

	// 点击优惠条件
	const ondiscount = (e) => {
		console.log(e, info.discount.includes(e.id));
		if (info.discount.includes(e.id)) {
			console.log("=sj", info.discount);
			info.discount.splice(info.discount.indexOf(e.id), 1)
			console.log("=sj", info.discount);
		} else {
			info.discount.push(e.id)
			console.log(info.discount);
		}

	}

	const onhouse = (e) => {
		if (info.lable.includes(e.id)) {
			info.lable.splice(info.lable.indexOf(e.id), 1)
		} else {
			info.lable.push(e.id)
		}
	}

	// 抢单
	const grabOrder = (e) => {
		popinfo.show = true
		info.id = e.id
		popinfo.data = e
		console.log(popinfo.data);
	}
	let hoysname = computed(()=>{
		let name = ''
		house.list.forEach(item => {
		
			item.houses.forEach(item => {
				if (item.show) {
					name = item.name
				}
			})
		})
		
		if(name){
			return name
		}else {
			return ''
		}
		
	})
	const submit = () => {
		info.houses = []
		house.list.forEach(item => {

			item.houses.forEach(item => {
				if (item.show) {
					info.houses.push({
						id: item.id,
						num: item.num
					})
				}
			})


		})

		hallrob(info).then(res => {
			console.log(res);
			
				popinfo.show =  false
				paging.value.reload()
				info.id = ''
				info.houses = []
				info.discount = []
				info.project = ''
				info.lable = []
			
		})
	}


	/*
	 *获取优惠条件
	 *
	 * */

	const getdiscounthouse = () => {
		discounthouse().then(res => {
			console.log(res);
			house.discount = res.data
		})
	}
	getdiscounthouse()

	// 获取标签
	const gettypeLabel = () => {
		typeLabel().then(res => {
			console.log(res);
			house.types = res.data
		})
	}

	gettypeLabel()



	// 获取商家房型
	let gethallhouse = () => {
		hallhouse().then(res => {
			let data = res.data
			house.list = data.map(item => {
				item.houses.map(itm => {
					itm.show = false
					itm.num = 1
					return itm
				})

				return item
			})
		})
	}


	let onShow = (index, bool) => {
		house.list[house.index].houses[index].show = bool
	}

	const onNum = (type, index) => {
		if (type == 'add') {
			house.list[house.index].houses[index].num = house.list[house.index].houses[index].num + 1
		} else {
			if (house.list[house.index].houses[index].num - 1 > 0) {
				house.list[house.index].houses[index].num = house.list[house.index].houses[index].num - 1
			}
		}
	}
	gethallhouse()

	const paging = ref(null)
	const dataList = ref([])
	// @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用paging.value.reload()即可
	const queryList = (pageNo, pageSize) => {
		// 此处请求仅为演示，请替换为自己项目中的请求
		halllists({
			page_no: pageNo,
			page_size: pageSize,
		}).then(res => {
			res.data.lists.map(item => {
				item.show = false
				return item
			})
			// 将请求结果通过complete传给z-paging处理，同时也代表请求结束，这一行必须调用
			paging.value.complete(res.data.lists);
			console.log(dataList);
		}).catch(res => {
			// 如果请求失败写paging.value.complete(false);
			// 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
			// 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
			paging.value.complete(false);
		})
	}
</script>

<style>
	page {
		background-color: #f5f5f5;
	}
</style>

<style lang="scss" scoped>
	.main {
		background: linear-gradient(#fff 0%, #fff 221rpx, #f5f5f5 20px);
		padding: 25rpx 30rpx;
		box-sizing: border-box;
	}

	.toptitle {
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 40rpx;
		color: #222222;
	}

	.top {
		width: 690rpx;
		// height: 90rpx;
		background: rgba(12, 176, 253, 0.1);
		border-radius: 5rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #1892FF;
		// line-height: 90rpx;
		// text-align: center;
		padding: 16rpx 37rpx 19rpx 30rpx;
		box-sizing: border-box;

		margin-top: 20rpx;
	}

	.bg1 {
		background-color: rgb(54, 221, 10);
	}

	.bg2 {
		background-color: rgb(221, 78, 10);
	}

	.order {
		width: 700rpx;
		// height: 609rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-top: 30rpx;

		&-top {
			width: 700rpx;
			// height: 90rpx;
			// background: linear-gradient(90deg, #0DBFFB, #198EFF);
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			display: flex;
			align-items: center;
			// justify-content: center;
			padding: 24rpx 30rpx 30rpx;
			box-sizing: border-box;

			&-icon {
				width: 36rpx;
				height: 36rpx;
			}

			&-title {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 30rpx;
				color: #F5F5F5;
				margin-left: 22rpx;
			}

			&-tps {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #F5F5F5;
				margin-left: 13rpx;
			}
		}


		&-box {
			padding: 0 35rpx;
			box-sizing: border-box;

			&-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 30rpx 0;

				border-bottom: 1rpx solid #EEEEEE;
			}

			&-icon {
				width: 52rpx;
				height: 52rpx;
			}

			&-left {
				display: flex;
				align-items: center;

			}

			&-span {

				min-width: 106rpx;
				height: 36rpx;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
				padding: 5rpx 12rpx;
				background: #F5F5F5;
				border-radius: 6rpx;
				margin-left: 20rpx;
				text-align: center;
				line-height: 36rpx;
			}

			&-room {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #198FFF;

				&>text {
					margin-left: 14rpx;
				}
			}

			&-price {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
			}

			&-span1 {
				min-width: 106rpx;
				height: 36rpx;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #198FFF;
				padding: 5rpx 12rpx;
				background: #F5F5F5;
				border-radius: 6rpx;
				margin-left: 20rpx;
				text-align: center;
				line-height: 36rpx;
			}

			&-total {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #666666;
			}

			&-num {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #ED2445;
				line-height: 48rpx;
			}
		}

		&-gd {
			width: 24rpx;
			height: 24rpx;
			margin-left: 2rpx;
		}

		&-sj {
			width: 28rpx;
			height: 28rpx;
			margin-right: 9rpx;
		}

		&-time {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #198FFF;
		}

		&-grab {
			width: 270rpx;
			height: 88rpx;
			background: linear-gradient(90deg, #0DBFFB, #198EFF);
			border-radius: 44rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 88rpx;
			text-align: center;
		}
	}

	.qd {
		width: 750rpx;
		height: 1300rpx;
		background: #EEEEEE;
		display: flex;
		flex-direction: column;

		&-top {
			width: 750rpx;
			// height: 248rpx;
			background: #FFFFFF;
			padding: 30rpx;
			box-sizing: border-box;

			&-title {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 36rpx;
				color: #111111;
			}

			&-icon {
				width: 28rpx;
				height: 28rpx;
			}

			&-tips {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #333333;
				margin-top: 27rpx;
			}

			&-fj {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #198FFF;
				padding: 14rpx 0;
				background-color: #F3F9FF;

			}

			&-lname {
				padding-left: 30rpx;
			}

			&-lprice {
				padding-right: 36rpx;
			}

			&-fjx {
				width: 1rpx;
				height: 20rpx;
				background: #198FFF;
				// margin: 0 29r ;
				margin-left: 29rpx;
				margin-right: 35rpx;
			}

			&-luser {
				padding-left: 25rpx;
			}

			&-lnum {
				padding-right: 76rpx;
			}

			&-fjs {
				width: 1rpx;
				height: 20rpx;
				background: #198FFF;
				// margin: 0 29r ;
				margin-left: 30rpx;
				margin-right: 25rpx;
			}
		}

		.active {
			background: #0FB5FC;
			color: #fff;
		}

		.gb {
			width: 32rpx;
			height: 32rpx;
			top: 30rpx;
			right: 35rpx;
		}

		&-box {
			padding: 30rpx;
			box-sizing: border-box;

			&-span {
				width: 162rpx;
				height: 50rpx;
				background: #F5F6FA;
				border-radius: 10rpx;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #666666;
				text-align: center;
				line-height: 50rpx;
				margin-right: 20rpx;
			}
		}

		&-item {
			// width: 749rpx;
			height: 200rpx;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 0rpx 0rpx;

			&-icon {
				width: 40rpx;
				height: 40rpx;
			}

			&-img {
				width: 150rpx;
				height: 150rpx;
				background: #F8F8F8;
				border-radius: 10rpx;
				margin-right: 26rpx;
			}

			&-info {
				height: 150rpx;
				width: 100%;
			}

			&-money {

				font-family: PingFang SC;
				font-weight: bold;
				font-size: 36rpx;
				color: #ED2445;

				&>text {
					font-size: 26rpx;
				}
			}
		}

		&-ts {
			&>text {

				font-family: PingFang SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #999999;
			}

			font-family: PingFang SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #7FDDFD;
			margin-left: 24rpx;
		}

		&-yh {


			&-title {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 30rpx;
				color: #444444;
			}

			&-yhq {

				display: grid;
				grid-template-columns: 1fr 1fr;
				gap: 21rpx;

			}

			&-yhqs {

				display: grid;
				grid-template-columns: 1fr 1fr 1fr 1fr;
				gap: 14rpx;

			}

			&-yhqitem {

				background: #F5F6FA;
				border-radius: 10rpx;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				// width: 320rpx;
				color: #666666;
				padding: 14rpx 24rpx;

			}

			&-yhqitems {

				background: #F5F6FA;
				border-radius: 10rpx;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				// width: 320rpx;
				color: #666666;
				padding: 14rpx 24rpx;

			}

			.boder {
				border: 1px solid #0CB0FD;
			}

			&-img {
				width: 32rpx;
				height: 32rpx;
				right: 0;
				bottom: 0;
			}
		}
	}

	.next {
		width: 236rpx;
		height: 72rpx;
		background: linear-gradient(90deg, #0DBFFB, #198EFF);
		border-radius: 36rpx 36rpx 36rpx 36rpx;

		font-family: PingFang SC;
		font-weight: bold;
		font-size: 26rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 72rpx;
	}

	.counter {

		&-icon {
			width: 40rpx;
			height: 40rpx;
		}

		&-num {
			width: 90rpx;
			height: 40rpx;
			background: #F8F8F8;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 30rpx;
			color: #333333;
			text-align: center;
		}
	}

	.span {
		padding: 14rpx 30rpx;
		background: #F5F5F5;
		border-radius: 10rpx;
		margin-right: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #333333;


	}
	
	.ptips{
		width: 600rpx;
		height: 370rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
		&-title {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 36rpx;
			color: #111111;
			text-align: center;
			margin-top: 40rpx;
		}
		
		&-box {
			padding: 54rpx;
			box-sizing: border-box;
		}
		
		.gb {
			width: 40rpx;
			height: 40rpx;
			right: 30rpx;
			top: 30rpx;
		}
	}
</style>